<template>
  <div>
    <h3>vue3中setup函数的使用</h3>
    <p>count:{{ count }}</p>
    <p>name:{{ name }}</p>
    <button @click="addfun">click to +1</button>
    <button @click="subfun">click to -1</button>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  components: {},
  data() {
    return {
      name: "双双",
    };
  },
  setup() {
    //   setup中没有this，也访问不了data中的数据
    //   console.log('data:name ',this.name);  //error

    // var count = 0; // 不用 ref 直接赋值在函数中能读到，但ui界面上的数值不会更新
    var count = ref(0); //ref() 返回一个对象，{value:0}

    function addfun() {
      count.value++;
      //   console.log("count:", count);
      console.log("count.value:", count.value);
    }
    const subfun = () => {
      count.value--;
      console.log("count.value:", count.value);
    };

    // 必须要return，否则模板中不能使用
    return {
      count,
      addfun,
      subfun,
    };
  },
  methods: {
    readSetupData() {
      // methods 等可以用this读取setup中return出去的数据
      console.log("读取setup中的数据:", this.count);
    },
  },
  updated() {
    this.readSetupData();
  },
  //   created() {
  //     console.log("created");
  //   },
  //   mounted() {
  //     console.log("mounted");
  //   },
  //   updated() {
  //     console.log("updated");
  //   },
  //   activated() {
  //     console.log("activated");
  //   },
  //   computed: {},
  //   watch: {},
  //   methods: {},
  //   unmounted() {
  //     console.log("unmounted");
  //   },
};
</script>
<style scoped></style>
